import { h } from 'vue';
import { BasicColumn, FormSchema } from '/@/components/Table';
import { Tinymce } from '/@/components/Tinymce';
// 表格字段
export const columns: BasicColumn[] = [
  {
    title: '文章标题',
    dataIndex: 'title',
  },
  {
    title: '发布者',
    dataIndex: 'auth',
  },
  {
    title: '发布时间',
    dataIndex: 'time',
  },
  {
    title: '浏览量',
    dataIndex: 'viewNum',
  },
  {
    title: '状态',
    dataIndex: 'status',
  },
  {
    title: '操作',
    dataIndex: 'action',
    slots: { customRender: 'action' },
    width: 260,
  },
];
// 表单
export const searchFormSchema: FormSchema[] = [
  {
    field: 'auth',
    label: '发布者',
    component: 'Input',
    colProps: { span: 5 },
    componentProps: {
      placeholder: '请输入',
    },
  },
  {
    field: 'title',
    label: '文章标题',
    component: 'Input',
    colProps: { span: 5 },
    componentProps: {
      placeholder: '请输入',
    },
  },
  {
    field: 'type',
    label: '文章分类',
    component: 'Select',
    componentProps: {
      placeholder: '请选择',
      options: [
        { label: '楼盘推荐', value: '楼盘推荐' },
        { label: '买房科普', value: '买房科普' },
        { label: '租房资讯', value: '租房资讯' },
        { label: '租房科普', value: '租房科普' },
      ],
    },
    colProps: { span: 5 },
  },
  {
    field: 'status',
    label: '状态',
    component: 'Select',
    componentProps: {
      placeholder: '请选择',
      options: [
        { label: '已上线', value: '已上线' },
        { label: '已下线', value: '已下线' },
      ],
    },
    colProps: { span: 5 },
  },
];

// 表格数据
export const dataSource = [
  {
    id: 1,
    title: '关于留学生网',
    auth: '曾阿牛',
    time: '2021-5-20 13:20:20',
    viewNum: '200',
    status: '已上线',
    seoTitle: 'seo标题',
    seoDesc: 'seo描述',
    seoKeyWord: 'seo关键字',
    seoUrl: 'seo-URL',
    pic: 'pic-URL',
    remark: '简介',
  },
  {
    id: 2,
    title: '关于留学生网',
    auth: '曾阿牛',
    time: '2021-5-20 13:20:20',
    viewNum: '200',
    status: '已上线',
    seoTitle: 'seo标题',
    seoDesc: 'seo描述',
    seoKeyWord: 'seo关键字',
    seoUrl: 'seo-URL',
    pic: 'pic-URL',
    remark: '简介',
  },
];

export const getAccountList = () => {
  return dataSource;
};

export const buildingFormSchema: FormSchema[] = [
  {
    field: 'title',
    label: '文章标题',
    component: 'Input',
    colProps: { span: 12 },
    componentProps: {
      placeholder: '请输入',
    },
  },
  // {
  //   field: 'type',
  //   label: '文章分类',
  //   component: 'Input',
  //   colProps: { span: 12 },
  //   componentProps: {
  //     placeholder: '请输入',
  //   },
  // },
  {
    field: 'type',
    label: '文章分类',
    component: 'Select',
    componentProps: {
      placeholder: '请选择',
      options: [
        { label: '楼盘推荐', value: '楼盘推荐' },
        { label: '买房科普', value: '买房科普' },
        { label: '租房资讯', value: '租房资讯' },
        { label: '租房科普', value: '租房科普' },
      ],
    },
    colProps: { span: 12 },
  },
  {
    field: 'auth',
    label: '作者',
    component: 'Input',
    colProps: { span: 12 },
    componentProps: {
      placeholder: '请输入',
    },
  },
  {
    label: '文章封面图',
    field: 'coverUrl',
    component: 'Upload',
    slot: 'coverUrlSlot',
  },
  {
    field: 'remark',
    label: '文章简介',
    component: 'Input',
    colProps: { span: 12 },
    componentProps: {
      placeholder: '请输入',
    },
  },
  {
    field: 'content',
    component: 'Input',
    label: '文章内容',
    defaultValue: '',
    render: ({ model, field }) => {
      return h(Tinymce, {
        value: model[field],
        onChange: (value: string) => {
          model[field] = value;
        },
      });
    },
  },
  {
    field: 'otherPic',
    label: '多图上传',
    component: 'Upload',
    componentProps: {
      api: '',
      accept: ['jpg', 'jepg', 'png', 'jpeg', 'JPG', 'PNG', 'JEPG', 'JPEG'],
      maxSize: 5,
    },
  },
  {
    field: 'seoTitle',
    label: 'SEO标题',
    component: 'Input',
    colProps: { span: 12 },
    componentProps: {
      placeholder: '请输入',
    },
  },
  {
    field: 'seoDesc',
    label: 'SEO描述',
    component: 'Input',
    colProps: { span: 12 },
    componentProps: {
      placeholder: '请输入',
    },
  },
  {
    field: 'seoKeyWord',
    label: 'SEO关键字',
    component: 'Input',
    colProps: { span: 12 },
    componentProps: {
      placeholder: '请输入',
    },
  },
  {
    field: 'seoUrl',
    label: 'SEO-URL',
    component: 'Input',
    colProps: { span: 12 },
    componentProps: {
      placeholder: '请输入',
    },
  },
  {
    field: 'pic',
    label: '图片ALT',
    component: 'Input',
    colProps: { span: 12 },
    componentProps: {
      placeholder: '请输入',
    },
  },
];
